<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0;padding-top: 20px;">
      <Card :bordered="false" dis-hover class="">
		  <Row type="flex" class="mb20">
		    <Col span="24">
		  	<span style="padding: 0px 0px 20px 0px;display: block">基础信息</span>
		    </Col>
		  </Row>
		  <Row type="flex" class="mb20 info-top">
			<img class="avatar" :src="userinfo.avatar">
			<div class="right-info">
				<div class="row">
					<div class="section2">
						<span class="label">姓名：</span>
						<span class="text">{{userinfo.nickname}}</span>
					</div>
					<div class="section">
						<span class="label">性别：</span>
						<span class="text" v-if="userinfo.sex == 0">男</span>
						<span class="text" v-else-if="userinfo.sex == 1">女</span>
						<span class="text" v-else>其他</span>
					</div>
					<div class="section">
						<span class="label">ID：</span>
						<span class="text">{{userinfo.uid}}</span>
					</div>
				</div><!--row end-->
				<div class="row">
					<div class="section2">
						<span class="label">所在城市：</span>
						<span class="text">{{userinfo.city}}</span>
					</div>
					<div class="section">
						<span class="label">宠物数：</span>
						<span class="text">{{userinfo.archives_count}}</span>
					</div>
					<div class="section">
						<span class="label">圈子数：</span>
						<span class="text">{{userinfo.group_count}}</span>
					</div>
					<div class="section">
						<span class="label">手机号码：</span>
						<span class="text">{{userinfo.new_phone}}</span>
					</div>
				</div><!--row end-->
				<div class="row">
					<div class="section2">
						<span class="label">注册时间：</span>
						<span class="text">{{userinfo.add_time|formatDate}}</span>
					</div>
				</div><!--row end-->
				<div class="row">
					<div class="section3">
						<span class="label">我的简介：</span>
						<span class="text">{{userinfo.intro}}</span>
					</div>
				</div><!--row end-->
			</div>
		  </Row>
      </Card>
    </div>
    
    <!-- 缩略图配置 -->
    <div class="table-box">
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block">建档信息</span>
		  </Col>
        </Row>
        <Table
          :columns="columns"
          :data="datas"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <template slot-scope="{ row, index }" slot="status">
            <!-- {{row}}{{index}} -->
            <i-switch
              v-model="row.status"
              :value="row.status"
              :true-value="1"
              :false-value="0"
              @on-change="changeSwitch(row, index)"
              size="large"
            >
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </template>
		  <template slot-scope="{ row, index }" slot="no">
		    {{index+1}}
		  </template>
          <template slot-scope="{ row, index }" slot="action">
            <a @click="detail(row)">详情</a>
		  </template>
        </Table>
      </Card>
    </div>
  </div>
</template>

<script>
import { ListUserApi } from '@/api/archives';
import { detailsApi } from '@/api/user';
import { formatDate } from '@/utils/validate';

export default {
  components: { },
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
  },
  data() {
    return {
      saveType: 0,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
	  
	  grid: {
	    xl: 8,
	    lg: 8,
	    md: 8,
	    sm: 24,
	    xs: 24,
	  },
      boxs: [
        { content: '左上', id: 1 },
        { content: '上', id: 2 },
        { content: '右上', id: 3 },
        { content: '左中', id: 4 },
        { content: '中', id: 5 },
        { content: '右中', id: 6 },
        { content: '左下', id: 7 },
        { content: '下', id: 8 },
        { content: '右下', id: 9 },
      ],
	  contractData: '',
      columns: [
		{
		  title: '序号',
		  slot: 'no',
		  align: 'center',
		  width: 100,
		},
        {
          title: '宠物名称',
          key: 'name',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '品种',
          key: 'type_id_name',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '生日',
          key: 'birthday',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '体重（kg)',
          key: 'weight',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          minWidth: 100,
        }
      ],
      total: 0,
	  datas:[],
	  userinfo:{},
      list: {
        page: 1,
        limit: 15,
        type: '1',
      },
    };
  },
  created() {
    // storageConfigApi().then((res) => {
    //   if (res.data.type == 1) {
    //     this.localStorage = true;
    //   }
    //   this.formValidate.upload_type = res.data.type;
    //   this.changeTab(res.data.type.toString());
    // });
  },
  mounted: function () {
	this.getUserData();
	this.getData();
  },
  methods: {
	  detail(row){
		  this.$router.push({ path: '/admin/archives/detail/' + row.id });
	  },
	getData() {
	  this.loading = true;
	  ListUserApi(this.$route.params.id)
	    .then(async (res) => {
	      let data = res.data;
	      this.datas = data.list;
			this.loading = false;
	    })
	    .catch((res) => {
	      this.loading = false;
	      this.$Message.error(res.msg);
	    });
	},
	getUserData() {
		let that = this;
	  detailsApi(this.$route.params.id)
	    .then(async (res) => {
	        that.userinfo = res.data.ps_info;
	    })
	    .catch((res) => {
			
	      this.$Message.error(res.msg);
	    });
	},
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
.info-top{
	display: flex;
	flex-direction: row;
	.avatar{
		width: 130px;
		height: 130px;
		border-radius: 10px;
	}
	.right-info{
		flex: 1;
		margin-left: 60px;
		.row{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10px;
			.section{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 200px;
				.label{
					
				}
				.text{
					
				}
			}
			.section2{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 250px;
				.label{
					
				}
				.text{
					
				}
			}
			.section3{
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				
				.label{
					width: 70px;
				}
				.text{
					flex: 1;
				}
			}
		}
	}
}
</style>
